

<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-table border stripe :data="SkuPageList">
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column prop="skuName" label="名称"></el-table-column>
        <el-table-column prop="skuDesc" label="描述"></el-table-column>
        <el-table-column label="默认图片">
          <template v-slot="{row}">
            <div>
              <img :src="row.skuDefaultImg" width="100" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="重量"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="" label="操作" width="350">
          <template v-slot="{row}">
            <div>
              <el-button size="small" type="info" @click="up(row)" v-if="row.isSale === 0" title="上架" icon="ele-Top">
              </el-button>
              <el-button size="small" type="success" @click="down(row)" v-else title="下架" icon="ele-Bottom"></el-button>
              <el-button size="small" type="primary" @click="edit(row)" title="修改" icon="ele-Edit"></el-button>
              <el-button size="small" type="info" title="详情" @click="drawerShow(row)" icon="ele-InfoFilled"></el-button>
              <el-button size="small" type="danger" title="删除" @click="deleteSku(row)" icon="ele-Delete"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination v-model:page-size="limit" v-model:current-page="page" :page-sizes="[10, 15, 17, 19]"
        :pager-count="5" layout="prev, pager, next,sizes" :total="total" />

      <el-drawer @close="closeDrawer" v-model="drawer" direction="rtl" size="50%">
        <el-row>
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{ skuDetail.skuName }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{ skuDetail.skuDesc }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="6">价格</el-col>
          <el-col :span="18">{{ skuDetail.price }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag v-for="item in skuDetail.skuAttrValueList" :key="item.id">
              {{ item.attrName }}-{{ item.valueName }}
            </el-tag>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag v-for="item in skuDetail.skuSaleAttrValueList" :key="item.id">
              {{ item.saleAttrName }}-{{ item.saleAttrValueName }}
            </el-tag>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <el-carousel trigger="click" height="450px">
              <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item.id">
                <img :src="item.imgUrl" width="450" height="450" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-drawer>

    </el-card>
  </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
import { ElMessage } from "element-plus";
export default defineComponent({
  name: 'Sku',
});
</script>

<script setup lang="ts">

import { onMounted, ref, watch } from "vue";
import { requestSkuList, requestcancelSale, requestOnSale, type SkuInfoListType, type SkuInfoItemType, requestDeleteSku, requestFindById } from "@/api/sku";
import type { SkuPageListType } from "@/api/sku";

const page = ref(1)
const limit = ref(3)
const total = ref(10)

const SkuPageList = ref<SkuInfoListType>([])

const getSkuList = async () => {
  try {
    const result = await requestSkuList(page.value, limit.value)
    SkuPageList.value = result.records
    total.value = result.total
  } catch (e) {
    ElMessage.error("请求列表数据失败")
  }
}

onMounted(() => {
  getSkuList()
})

watch([page, limit], () => {
  getSkuList()
})

//控制按钮显示隐藏
// const showEdit = ref(0)

const up = async (row: SkuInfoItemType) => {
  try {
    await requestOnSale(row.id as number)
    getSkuList()
    ElMessage.success("上架成功")
  } catch (e) {
    ElMessage.error("上架失败")
  }

}
const down = async (row: SkuInfoItemType) => {
  try {
    await requestcancelSale(row.id as number)
    getSkuList()
    ElMessage.success("下架成功")
  } catch (e) {
    ElMessage.error("下架失败")
  }
}
// 修改
const edit = (row: SkuInfoItemType) => {
  console.log("row", row)
  ElMessage.info("正在开发中....");
}
//删除
const deleteSku = async (row: SkuInfoItemType) => {
  try {
    await requestDeleteSku(row.id as number)
    getSkuList()
    ElMessage.success("删除成功")
  } catch (e) {
    ElMessage.error("删除失败")
  }
}

//查看
//控制抽屉
const drawer = ref(false)
// 根据SkuId获取它的详情信息  保存 详情信息
const skuDetail = ref<SkuInfoItemType>({
  price: 0,
  skuName: "",
  skuDesc: "",
  weight: "",
  skuDefaultImg: "",
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: []
})

//展开弹窗
const drawerShow = async (row: SkuInfoItemType) => {
  try {
    drawer.value = true
    const result = await requestFindById(row.id as number)
    skuDetail.value = result
  } catch (e) {
    ElMessage.error("查询失败")
  }
}

//关闭弹窗
const closeDrawer = () => {
  skuDetail.value = {
    price: 0,
    skuName: "",
    skuDesc: "",
    weight: "",
    skuDefaultImg: "",
    skuImageList: [],
    skuAttrValueList: [],
    skuSaleAttrValueList: []
  }
};









</script>